<template>
	<view class="addressManage">
		<comHead :title="$t('grzx.dzgl')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">
			<radio-group name="" @change="radioChange">
				<view class="item" v-for="(item, index) in list">
					<label class="l">
						<radio :value="index" />
						<image :src="changeImage(index)" mode=""></image>
					</label>
					<view class="c">
						<text class="address">{{item.area + item.address}}</text>
						<view class="other">
							<text class="name">{{item.name}}</text>
							<text class="mobile">{{item.mobile}}</text>
						</view>
					</view>
					<view class="r">
						<image @click="editAddress(item)" src="https://siha.vxmeng.com/static/index/edit.png" mode="widthFix"></image>
					</view>
				</view>
			</radio-group>
		</view>
		
		<view class="btn" @click="comLink('/pages/my/createAddress')">{{$t('grzx.xzdz')}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioVal: 0,
				list: []
			}
		},
		onShow() {
			this.getUserAddress()
		},
		methods: {
			radioChange(e){
				this.radioVal = e.detail.value
			},
			changeImage(n){
				if (n == this.radioVal) {
					return 'https://siha.vxmeng.com/static/my/selected.png';
				} else {
					return 'https://siha.vxmeng.com/static/my/no-selected.png';
				}
			},
			async getUserAddress(){
				const res = await this.$myRequest({
					url: 'api/address/getUserAddressList',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.list = res.data
				}
			},
			editAddress(item){
				this.comLink(`/pages/my/editAddress?address=${JSON.stringify(item)}`)
			}
		}
	}
</script>

<style lang="less" scoped>
 .addressManage{
	 min-height: 100vh;
	 .list{
		 .item{
			 width: 690rpx;
			 height: 180rpx;
			 margin: 20rpx auto 0;
			 box-sizing: border-box;
			 padding: 30rpx;
			 background: linear-gradient(to right bottom, rgba(28, 25, 28), rgba(18, 18, 30));
			 color: #D8D8D8;
			 display: flex;
			 justify-content: space-between;
			 border-radius: 20rpx;
			 .l{
				 width: 80rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 radio{
				 	visibility: hidden;
				 	position: absolute;
				 }
				 image{
				 	width: 32rpx;
				 	height: 32rpx;
				 }
			 }
			 .c{
				 flex: 1;
				 display: flex;
				 flex-direction: column;
				 justify-content: space-between;
				 .address{
					 flex: 1;
					 display: flex;
					 align-items: center;
					 overflow: hidden;
					 text-overflow: ellipsis;
					 display: -webkit-box;
					 -webkit-line-clamp: 2;
					 -webkit-box-orient: vertical;
					 line-height: 1.5em;
				 }
				 .other{
					 color: #999999;
				 	font-size: 24rpx;
					text{
						margin-right: 20rpx;
					}
				 }
			 }
			 .r{
				 width: 100rpx;
				 display: flex;
				 justify-content: flex-end;
				 align-items: center;
				 image{
					 width: 26rpx;
				 }
			 }
		 }
	 }
	 .btn{
		 width: 560rpx;
		 height: 80rpx;
		 margin: 50rpx auto;
		 background: linear-gradient(102deg, #00A6FE 20%, #854EFF 85%);
		 line-height: 80rpx;
		 text-align: center;
		 color: #fff;
		 border-radius: 40rpx;
	 }
 }
</style>